<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入口界面</title>
    {css href='/static/css/bootstrap.css'}
</head>
<body>

{include file="common/header"}
<main class="m-4 p-4">
    <div class="mt-3">
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">用户名</th>
                <th scope="col">手机号</th>
                <th scope="col">当前余额</th>
                <th scope="col">历史收益</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
                {volist name="list" id='obj'}
                    <tr>
                        <th scope="row">{$obj.uid}</th>
                        <td>{$obj.username}</td>
                        <td>{$obj.phone}</td>
                        <td>{$obj.credit}</td>
                        <td>{$obj.total_credit}</td>
                        <td>
                            <button class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#edit">编辑</button>
                            <button class="btn btn-sm btn-danger" data-uid="{$obj.uid}" data-toggle="modal" data-target="#delete">删除</button>
                        </td>
                    </tr>
                {/volist}
            </tbody>
        </table>
    </div>
</main>

<!-- 编辑 -->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="editLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!-- 删除 -->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteLabel">删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                一旦删除无法撤回, 是否删除该用户?
                <input type="hidden" id="deleteUid">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="deleteUser()">确认</button>
            </div>
        </div>
    </div>
</div>
{js href='/static/js/jquery.min.js'}
{js href='/static/js/bootstrap.js'}
<script>
    var deleteButton = $('#delete')
    deleteButton.on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget)
        var thisUid = button.data('uid')
        var modal = $(this)
        modal.find('.modal-body #deleteUid').val(thisUid)
    })
    function deleteUser(){
        deleteButton.modal('hide')
        const $deleteUid = $('#deleteUid').val();
        console.log($deleteUid);
        $.ajax({
            url : '/user/deleteUser',
            type : 'POST',
            data : {
              uid : $deleteUid
            },
            success : (res)=>{
                if (res.code !== 200){
                    console.log(res.message);
                    return false;
                }

                location.reload();

            }
        })
    }
</script>
</body>
</html>